﻿<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Választókörzet adatok Google térképen</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="util.js"></script>
<script type="text/javascript">
  var map;
  var infowindow;



  function initialize() {
    var latlng = new google.maps.LatLng(47.50000, 19.06100);
    var mapOptions = {
      zoom: 8,
	  center: latlng,
	  mapTypeId: google.maps.MapTypeId.ROADMAP,
	  navigationControl: true,
	    navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
	  mapTypeControl: true,
        mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
    }
    
	map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    
	downloadUrl("polytest_korzet.xml", function(data) {
	  var polygons = data.documentElement.getElementsByTagName("polygon");
	  for (var a = 0; a < polygons.length; a++) {
		var name = polygons[a].getAttribute("name");
		var latlng = new google.maps.LatLng(parseFloat(polygons[a].getAttribute("lat")),
                                            parseFloat(polygons[a].getAttribute("lng")));
		var color = polygons[a].getAttribute("color");
		var strokecolor = polygons[a].getAttribute("strokecolor");
		var pts = [];
		var points = polygons[a].getElementsByTagName("point");
		for (var i = 0; i < points.length; i++) {
		  
		  pts[i] = new google.maps.LatLng(parseFloat(points[i].getAttribute("lat")),
								          parseFloat(points[i].getAttribute("lng")));	  
	    }
        var states = createPolygon(pts, strokecolor, color, name, latlng);	  
	 
	  }	
	
	});
  
  }

  function createPolygon(pts, strokecolor, color, name, latlng) {	
	
	var states = new google.maps.Polygon({paths: pts, strokeColor: strokecolor, strokeOpacity: 0.8, strokeWeight: 0.5, fillOpacity: 0.4, fillColor: color});	
	
	google.maps.event.addListener(states, 'click', function(event){         
      
	  if (infowindow) infowindow.close();
      
	  infowindow = new google.maps.InfoWindow({content: '<b>Választókörzet adatok: </b><br>'+name});
	  
	  infowindow.setPosition(event.latLng);
      
	  infowindow.open(map);
	
	});
	
	states.setMap(map);
  
  }

</script>
</head>
<body onLoad="initialize()">
   <div id="map_canvas" style="width:100%; height:100%; border:1px solid #000000"></div>
</body>

</html>
